<template>
  <div>
    <h2 style="text-align: center">表单编辑提交</h2>
  </div>
  <div>
    <!-- 如果formData为空, 则显示空状态 -->
    <template v-if="JSON.stringify(formData) === '{}'">
      <ElEmpty description="请选择模板" />
    </template>

    <!-- 如果formData不为空, 则显示表单 -->
    <template v-else>
      <EditForm :formData="formData" @submit="submit" />
    </template>
  </div>
  <div style="height: 50px"></div>
</template>

<script setup lang="ts">
import type { IFormData } from '@/components/EditForm/commonType'
import { ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import EditForm from '@/components/EditForm/EditForm.vue'

//#region webview 函数

const webViewGetFormData = () => {
  if (!window?.webview) {
    // El 弹出框提示
    ElMessageBox.alert('请在PDA端操作', {
      confirmButtonText: '确定',
      showClose: false,
    })
  } else {
    window.webview.raiseEvent('getFormData')
  }
}

const webViewSubmit = (jsonData: IFormData) => {
  if (!window?.webview) {
    // El 弹出框提示
    ElMessageBox.alert('请在PDA端操作', {
      confirmButtonText: '确定',
      showClose: false,
    })
  } else {
    window.webview.raiseEvent('submit', JSON.stringify(jsonData))
  }
}

//#endregion

// (初始化时) 获取表单数据, 让 webview 调用 setFormData 方法
webViewGetFormData()

const formData = ref<IFormData>({})
// 设置表单数据
window.setFormData = (json: string) => {
  formData.value = JSON.parse(json)
}

// 提交
const submit = (data: IFormData) => {
  // 开发环境打印数据
  if (import.meta.env.DEV) console.log('data', data)

  // 提交到 webview
  webViewSubmit(data)
}
</script>

<style scoped>
:root {
  .el-form {
    --el-form-label-font-size: 20px;
    --el-form-label-font-weight: 500;
  }
}

:deep(.el-form-item--label-top .el-form-item__label) {
  font-weight: var(--el-form-label-font-weight);
}

/* 小屏幕手机端 */
@media (min-width: 0px) and (max-width: 768px) {
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 768px) and (max-width: 992px) {
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 992px) {
}
</style>
